<template>
  <div class="app-container home">
    <baidu-map center="郑州"  :map-click="false" :zoom="zoom"  @ready="handler" :scroll-wheel-zoom="croll_wheel_zoom" class="bm-view">

      <div class="monitoring">
          <h2>运行监测</h2>
          <div>
            <p ><i class="el-icon-edit"></i>未连接</p>
            <el-progress  class="wi" :show-text="false" color="#909399"  define-back-color="#dedede" :text-inside="true" :stroke-width="15"
            :percentage='this.percentages.weilianjie'></el-progress>
            <p>{{ counts.weilianjie }}</p>
          </div>
          <div >
            <p><i class="lixian"></i>离线</p>
            <el-progress class="wi"  :show-text="false" status="warning"  define-back-color="#dedede" :text-inside="true" :stroke-width="15" :percentage="this.percentages.lixian"></el-progress>
            <p>{{ counts.lixian }}</p>
          </div>
          <div >
            <p><i class="baojing"></i>正常</p>
            <el-progress class="wi"  :show-text="false" status="success" define-back-color="#dedede"  :text-inside="true" :stroke-width="15" :percentage="this.percentages.zaixian"></el-progress>
            <p>{{ counts.zaixian }}</p>
          </div>
          <div>
            <p><i class="zhengchang"></i>报警</p>
            <el-progress class="wi"  :show-text="false" status="exception"  define-back-color="#dedede" :text-inside="true" :stroke-width="15" :percentage="this.percentages.baojing"></el-progress>
            <p>{{ counts.baojing }}</p>
          </div>
      </div>
      <div class="showBox">
          <div class="column">
              <span class="intro">设备总量</span>
              <p>{{ total }}</p>
          </div>
          <div class="column">
              <span class="intro">今日报警数</span>
              <p>0个</p>
          </div>
          <div class="column">
              <span class="intro">已恢复数</span>
              <p>0个</p>
          </div>
      </div>
      <bm-view style="width: 100%; height:95vh; flex: 1">

      </bm-view>
      <bm-marker  v-for="(item,index) in points"
                  :key="index"
                  :position="item"
                  @click="showItem(index)"
                  :icon="item.status === 0 ? {url: require('../assets/images/0.png'), size: {width: 30, height: 30}} :
                  ( item.status === 1 ?{url: require('../assets/images/1.png'), size: {width: 30, height: 30}} :
                  (item.status === 2 ? {url: require('../assets/images/2.png'), size: {width: 30, height: 30}}:
                  {url: require('../assets/images/3.png'), size: {width: 30, height: 30}} )) "
                  ></bm-marker>
      <bm-info-window :position="position"
                    :show="show"
                    @close="infoWindowClose"
                    @open="infoWindowOpen"
                    :width="730"
                    :height="0"
                    :maxWidth="730">
                      <el-descriptions>
                        <template slot="title">设备号： {{ position.snNum}}</template>
                        <template slot="extra">
                          <el-button class="painter" type="text" @click="dialogVisible =true">图片</el-button>
                          <el-dialog
                            title="设备图片"
                            :visible.sync="dialogVisible"
                            width="300px">
                            <div class="block">
                              <el-image class="picture" :src="position.picture"></el-image>
                            </div>
                          </el-dialog>
                        </template>
                          <el-descriptions-item label="电池电压"><span class="textcolor">{{ position.batteryVoltage }}</span>  V</el-descriptions-item>
                          <el-descriptions-item label="倾斜角度"><span class="textcolor">{{ position.leanAngle }}</span>deg</el-descriptions-item>
                          <el-descriptions-item label="信噪比"><span class="textcolor">{{ position.sinr }}</span>db</el-descriptions-item>
                          <el-descriptions-item label="信号强度"><span class="textcolor">{{ position.rsrp }}</span>dbm</el-descriptions-item>
                          <el-descriptions-item label="漏水状态"><span class="textcolor">0</span></el-descriptions-item>
                          <el-descriptions-item label="设备地址">{{ position.address }}</el-descriptions-item>

                        </el-descriptions>
                  </bm-info-window>
    </baidu-map>
  </div>
</template>

<script>
import { listMapData } from "@/api/system/mapList";
export default {
  name: "Index",
  props: {
    mapObj: Array,//结构[{ lng: '', lat: '',title:''}]
    showMap: Boolean,
  },
  watch: {
    showMap() {
      this.center = ''
      this.initMaker()
    },
  },
  data() {
    return {
      dialogVisible:false,
      // 版本号
      version: "3.8.5",
      center: {lng: 0, lat: 0},
      zoom: 13,
      croll_wheel_zoom: true,
      draggingList: [],
      points: [],
      show:false,
      position:{},
      counts: {
        weilianjie: 0,
        zaixian: 0,
        lixian: 0,
        baojing: 0
      },
      percentages: {},
      total: 0
  };
  },
  created(){
    this.getList();
  },
  methods: {
    getList(){
      listMapData(null).then(res=>{
          this.points = res.rows
          this.countStatus();
        })
    },
    countStatus() {
      for (const point of this.points) {
        const statusName = Object.keys(this.counts)[point.status];
        this.counts[statusName] += 1;
        this.total++;
      }

      for (const statusName in this.counts) {
        this.percentages[statusName] = (this.counts[statusName] / this.total) * 100;
  }
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
    handler ({BMap, map}) {
      this.center.lng = 116.404
      this.center.lat = 39.915
    },
    showItem(index){
      this.draggingList = []
      this.draggingList[index] = true
      this.position = this.points[index]
      this.show = true
      console.log(this.position)
    },
    infoWindowClose() {
      this.show = false
    },
    infoWindowOpen() {
      this.show = true
    },
    // test(){
    //   //设置弹窗
    //   this.dialogVisible =true
    // }
  }
};
</script>

<style scoped lang="scss">
.home {
  padding: 0;
  height: 100%;
  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;
}
.bm-view{
    width: 100%;
    height: 100%;
  }
  .textcolor{
    color: #409EFF;
  }
.monitoring{
    position: absolute;
    left: 20px;
    top: 60px;
    width: 380px;
    background-color: #f2f3f7;
    z-index: 20;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #f2f3f7;
    border-radius: 8px;
    color: #333;
    overflow: hidden;
    background: #f2f3f7;
    div {
        display: flex;
    }
    p {
      width: 25%;
      margin-left: 5%;
    }
    .wi{
      width: 60%;
      margin-top: 10px;
    }

    .el-icon-edit{
      background: url('../assets/images/2.png') center center no-repeat;
      background-size: 16px;
    }

    .el-icon-edit:before {
          content: "代替";
          font-size: 16px;
          visibility: hidden;
      }
    .lixian{
        background: url('../assets/images/0.png') center center no-repeat;
        background-size: 16px;
    }

    .lixian:before {
          content: "代替";
          font-size: 16px;
          visibility: hidden;
      }
    .baojing{
      background: url('../assets/images/1.png') center center no-repeat;
      background-size: 16px;
    }

    .baojing:before {
          content: "代替";
          font-size: 16px;
          visibility: hidden;
      }
    .zhengchang{
      background: url('../assets/images/3.png') center center no-repeat;
      background-size: 16px;
    }

   .zhengchang:before {
        content: "代替";
        font-size: 16px;
        visibility: hidden;
    }
    h2{
      background: #1a9bec;
      text-align: center;
      color:white;
      height: 40px;
      line-height: 40px;
      font-weight: bold;
      font-size: 16px;
      margin-block-start: 0.83em;
      margin-block-end: 0.83em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
    }
}
.showBox{
    top: 20%;
    right: 1%;
    position: absolute;
    z-index: 999;
    padding: 5px;
    border: 1px solid #ccc;
    color: #000;
    border-radius: 4px;
    -webkit-box-shadow: 1px 1px 1px #666;
    box-shadow: 1px 1px 1px #666;
    background: #fff;
    opacity: .8;
    .column{
      padding: 5px;
      border-bottom: 1px solid #ccc;
      background: #fff;
      line-height: 15px;
      font-size: 14px;
    }
  .painter{
    height: 260px;
  }
}
</style>

